<template>
  <div>
    <div style="position: relative;">
      <div class="clearfix" style="margin: 20px;">
        <div style="float: left; height: 28px; line-height: 28px;">

          <span style="color: #ff5aa8;">标题：{{ title }}</span>
          <span style="margin-left: 35px;color: #409EFF;">部门：{{ deptName }}</span>
          <span style="margin-left: 35px; color: #67C23A;">薪资月份：{{ salaryDate.split("-")[0] + "-"+ (salaryDate.split("-")[1]?salaryDate.split("-")[1]:" ") }}</span>
          <span style="margin-left: 20px; color: #222;">发放人数：{{ pnum }}</span>
        </div>

        <div style="float: right;">
          <el-button
            type="success"
            size="mini"
            @click="goBack"
          >返回
          </el-button>

          <el-button
            v-if="type=='3'"
            type="primary"
            size="mini"
            @click="handleApprove(1)"
          >审批通过
          </el-button>

          <el-button
            v-if="type=='3'"
            type="danger"
            size="mini"

            @click="handleApprove(2)"
          >审批拒绝
          </el-button>
        </div>
      </div>
    </div>
    <template>
      <el-table
        v-loading="listLoading"
        class="list-table"
        :data="listData"
        stripe
        size="small"
        fit
        highlight-current-row
        max-height="550"
        show-summary
        :summary-method="handleSummaries"
        :default-expand-all="isExpand"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        style="width: 100%;"
      >

        <el-table-column fixed="left" :show-overflow-tooltip="true" prop="salaryDate">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">工资年月</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.salaryDate | formatTimestamp | formatDate('yyyy-MM') }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="left" :show-overflow-tooltip="true" prop="employeeName">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">姓名</p>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="certNo" width="160">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">身份证号</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.certNo }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="deptName" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">部门名称</p>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="status">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">员工状态</p>
          </template>
          <template slot-scope="scope">
            <el-tag :type="scope.row.employeeStatus | employeeStatus" size="small">{{ scope.row.employeeStatus |
              employeeStatus('text') }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="postName">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">岗位/职务</p>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="onboardingDate" width="100">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">入职日期</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.onboardingDate | formatTimestamp | formatDate('yyyy-MM-dd') | formatDefaultDate }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="leaveDate" width="100">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">离职日期</p>
          </template>
          <template slot-scope="scope">
            <span>
              {{ scope.row.leaveDate | formatTimestamp | formatDate('yyyy-MM-dd') | formatDefaultDate }}
            </span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="baseSalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">基础工资(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.baseSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="assessmentSalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">绩效奖金(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.assessmentSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="postSalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">岗位工资(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.postSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="marketingSalary" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">营销奖金（行方）(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.marketingSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="subsidySalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">补贴工资(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.subsidySalary }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="overtimeSalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">加班工资(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.overtimeSalary }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column :show-overflow-tooltip="true" prop="reissueSalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">补发项</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.reissueSalary }}</span>
          </template>
        </el-table-column>-->
        <el-table-column :show-overflow-tooltip="true" prop="attendanceDeduction" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">考勤扣款(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.attendanceDeduction }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column :show-overflow-tooltip="true" prop="businessDays" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">出差天数</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.businessDays }}</span>
          </template>
        </el-table-column>-->
        <el-table-column :show-overflow-tooltip="true" prop="allowanceSalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">津贴(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.allowanceSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="teacherMealSalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">讲师餐补(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.teacherMealSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="labourServiceSalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">劳务工资(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.labourServiceSalary }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column :show-overflow-tooltip="true" prop="personnelManagementDept" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">人事管理部</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.personnelManagementDept }}</span>
          </template>
        </el-table-column>-->
        <!--<el-table-column :show-overflow-tooltip="true" prop="marketInnovationDept" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">市场创新部</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.marketInnovationDept }}</span>
          </template>
        </el-table-column>-->
        <!--<el-table-column :show-overflow-tooltip="true" prop="officialWebsite" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">官网</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.officialWebsite }}</span>
          </template>
        </el-table-column>-->
        <!--<el-table-column :show-overflow-tooltip="true" prop="substituteDeduction" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">代发代付</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.substituteDeduction }}</span>
          </template>
        </el-table-column>-->
        <el-table-column :show-overflow-tooltip="true" prop="otherDeduction" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">其他扣款(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.otherDeduction }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="payableSalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">应付工资(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.payableSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="personalSocialSecurityTotalCost" width="170">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">个人社保总扣除(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.personalSocialSecurityTotalCost }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="personalSocialSecurityAdjust" width="170">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">个人社保总扣除调整(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.personalSocialSecurityAdjust }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="enterpriseSocialSecurityTotalCost" width="170">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">企业社保总扣除(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.enterpriseSocialSecurityTotalCost }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="securityCharge" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">服务费(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.securityCharge }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="beforeTaxSalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">税前工资(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.beforeTaxSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="personalIncomeTax" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">个税(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.personalIncomeTax }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="labourServiceTax" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">劳务税(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.labourServiceTax }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="realSalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">实发工资(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.realSalary }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column :show-overflow-tooltip="true" prop="remark" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">备注</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>-->
        <!-- <el-table-column :show-overflow-tooltip="true" prop="bankNo" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">银行卡号</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.bankNo }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="openingBank" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">开户行</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.openingBank }}</span>
          </template>
        </el-table-column> -->

        <!-- <el-table-column  prop="phone" width="100">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">电话号码</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.phone }}</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="remark" width="100">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">备注</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>

      </el-table>
    </template>

    <el-dialog title="请输入拒绝原因" :visible.sync="openReasonInput" width="650px">

      <el-row :gutter="20">

        <el-col :span="16" :offset="2">

          <el-input
            v-model="remark"
            type="textarea"
            :rows="7"
            placeholder="请输入审核意见"
            clearable
            size="small"
            style="margin-bottom: 20px;"
          />

        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="handleEditRejectSubmit2">确认审批拒绝</el-button>
        <el-button @click="openReasonInput = false">取消</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import { debounce } from 'lodash'
import { mapGetters } from 'vuex'
import { createSalarymakeAPI, updateSalarymakeAPI, submitApproveAPI } from '@/api/todo/salarymake'
import commonMixins from '@/mixins/common'
import salaryMixins from '@/mixins/salary'
import filters from '@/filters/filters'
import tagFilter from '@/filters/tagFilter'
import { getEmployeeListCreateAPI, getEmployeeListUpdateAPI } from '@/api/todo/salarymake'
import request from '@/utils/request'

export default {
  name: 'SalarymakeTable',
  components: {},
  mixins: [commonMixins, salaryMixins, filters, tagFilter],
  props: {},
  data() {
    return {
      	title: '',
      deptName: '',
      salaryDate: '',
      type: '3', // 代表只是查看
      listLoading: '',
      searchKey: {},
      isExpand: true,
      listData: [], // 列表数据
      openReasonInput: false,
      remark: ''
    }
  },
  computed: {},
  methods: {
    goBack() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.push({
        name: 'Task'
      })
    },
    handleReelect() { // 重选选择
      this.$emit('on-reelect')
    },
    formatParams() { // 格式化参数
      const { id, type } = this
      const { deptId, salaryDate } = this.searchKey
      const params = {
        salaryMonth: salaryDate,
        deptId: deptId,
        hrSalaryMonths: []
      }
      this.listData.forEach((item, index) => {
        params.hrSalaryMonths[index] = {
          ...item,
          ...{
            salaryDate: salaryDate,
            deptId: deptId
          }
        }
      })
      if (type !== '1') { // 修改、查看
        params.id = id
      }
      // console.log(params)
      // console.log(JSON.stringify(params))
      return params
    },
    handleEditSubmit: debounce(function() { // 保存，防抖
      const params = this.formatParams()
      this.saveData(params)
    }, 300),
    handleChangeInputValue(data) {
      const { row } = data
      Object.keys(row).forEach((item, index) => {
        this.$set(this.listData[data.$index], item, row[item])
      })
    },

    // yyf
    handleApprove(option) { // 审批
      const msg = option == 1 ? ' <b><font color=green>通过</font></b> ' : ' <b><font color=red>拒绝</font></b> '

      this.$confirm('审批操作不可撤销,请认真审核,您确定要' + msg + '吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        /* let params = this.formatParams()
          this.submitApproveData(params)*/

        if (option == 1) {
          // 审批通过就直接提交

          const auditOpinion = prompt('请输入审批意见！')

          request({
            url: '/hr/salaryMonth/make/audit',
            method: 'post',
            data: {
              taskId: this.taskId,
              auditOpinion: auditOpinion || '同意',
              auditResult: 1
            }
          }).then(response => {
            if (response.code != '200') {
              this.msgError('审批失败，原因是' + response.data.msg)
              return
            }

            if (response.data.receiveDeptName) {
              this.msgSuccess(response.data.msg + '，下一步办理人【' + response.data.receiveDeptName + '】【' + response.data.receiverName + '】')
            } else {
              this.msgSuccess(response.data.msg)
            }
            // this.msgSuccess(response.data.msg+'，下一步办理人【'+response.data.receiveDeptName+'】【'+response.data.receiverName+'】');
            const that = this
            setTimeout(() => {
              that.goBack()
            }, 2000)
          })
        } else {
          // 审批拒绝需要填写拒绝原因
          this.openReasonInput = true
        }
      })
    },

    async getList() {
      const query = this.$route.query
      const id = query.businessId
      this.taskId = query.taskId
      this.title = query.title

      const response = await getEmployeeListUpdateAPI({ id: id })

      this.pnum = response.data.pnum

      console.log('加载薪资数据', response)

      this.listData = response.data.hrSalaryMonths

      this.deptName = response.data.deptName
      this.salaryDate = response.data.salaryMonth
    },

    handleEditRejectSubmit2() {
      if (!this.remark) {
        this.msgError('请填写拒绝原因！')
        return
      }

      request({
        url: '/hr/salaryMonth/make/audit',
        method: 'post',
        data: {
          taskId: this.taskId,
          auditOpinion: this.remark,
          auditResult: 0
        }
      }).then(response => {
        if (response.code != '200') {
          this.msgError('审批失败，原因是' + response.data.msg)
          return
        }

        if (response.data.receiveDeptName) {
          this.msgSuccess(response.data.msg + '，下一步办理人【' + response.data.receiveDeptName + '】【' + response.data.receiverName + '】')
        } else {
          this.msgSuccess(response.data.msg)
        }

        const that = this
        setTimeout(() => {
          that.goBack()
        }, 2000)
      })
    }

  },
  watch: {
    /* data: {
         handler: function(newVal, oldVal) {
           if (JSON.stringify(newVal) !== JSON.stringify(this.listData)) {
             this.listData = JSON.parse(JSON.stringify(newVal))
           }
         },
         immediate: true
       },
       searchParams: {
         handler: function(newVal, oldVal) {
           if (JSON.stringify(newVal) !== JSON.stringify(this.searchKey)) {
             this.searchKey = JSON.parse(JSON.stringify(newVal))
             console.log(this.searchKey)
           }
         },
         deep: true,
         immediate: true
       }*/
  },
  created() {
    this.getList()
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
  .list-table {
    .el-button--mini {
      padding: 7px 15px;
      width: 45px;
      color: #fff;
    }

    & /deep/ .el-table__header-wrapper {
      th {
        background-color: #fff;
      }
    }
  }
</style>
